<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-tag text="标签"> </pure-tag>
        </a-demo>

        <a-demo title="主题">
            <view class="tags">
                <pure-tag class="pure-tag-primary" text="主要"></pure-tag>
                <pure-tag class="pure-tag-success" text="成功"></pure-tag>
                <pure-tag class="pure-tag-danger" text="危险"></pure-tag>
                <pure-tag class="pure-tag-warning" text="警告"></pure-tag>
                <pure-tag class="pure-tag-info" text="信息"></pure-tag>
            </view>
        </a-demo>

        <a-demo title="图标">
            <view class="tags">
                <pure-tag class="pure-tag-primary" text="消费" icon="__xiaofei"></pure-tag>
                <pure-tag class="pure-tag-success" text="目标" icon="__mubiao"></pure-tag>
                <pure-tag class="pure-tag-danger" text="记录" icon="__jilu"></pure-tag>
            </view>
        </a-demo>

        <a-demo title="关闭按钮">
            <view class="tags">
                <pure-tag class="pure-tag-primary" text="消费" icon="__xiaofei" showClose @close="handleClose"></pure-tag>
                <pure-tag class="pure-tag-success" text="目标" icon="__mubiao" showClose closeIcon="__shibai1" @close="handleClose"></pure-tag>
            </view>
        </a-demo>

        <a-demo title="圆角标签">
            <view class="tags">
                <pure-tag class="pure-tag-primary pure-tag-round" text="圆角标签"></pure-tag>
            </view>
        </a-demo>

        <a-demo title="朴素标签">
            <view class="tags">
                <pure-tag class="pure-tag-primary pure-tag-plain" text="朴素"></pure-tag>
                <pure-tag class="pure-tag-success pure-tag-plain" text="朴素"></pure-tag>
                <pure-tag class="pure-tag-danger pure-tag-plain" text="朴素"></pure-tag>
                <pure-tag class="pure-tag-warning pure-tag-plain" text="朴素"></pure-tag>
                <pure-tag class="pure-tag-info pure-tag-plain" text="朴素"></pure-tag>
            </view>
        </a-demo>

        <a-demo title="标签组 - 多选">
            <pure-tag-group class="tags pure-tag-info" v-model="values" checkedClass="pure-tag-danger">
                <pure-tag :text="item.text" v-for="item in options" :key="item.text"></pure-tag>
            </pure-tag-group>
        </a-demo>

        <a-demo title="标签组 - 单选">
            <pure-tag-group class="tags pure-tag-info" v-model="value" checkedClass="pure-tag-danger">
                <pure-tag :text="item.text" v-for="item in options" :key="item.text"></pure-tag>
            </pure-tag-group>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 关闭事件
    function handleClose() {
        uni.showToast({
            title: "关闭",
            icon: "none",
        });
    }

    // 标签组
    const options = [{ text: "标签1" }, { text: "标签2" }, { text: "标签3" }, { text: "标签4" }, { text: "标签5" }];
    const values = ref([]);
    const value = ref("");
</script>

<style scoped>
    .tags {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
</style>
